<template>
  <el-container>
    <el-header height="100px">
      <el-row>
        <el-col :span="10">
          <breadcrumb @selectChange="loadPapersById($event)"></breadcrumb>
        </el-col>
        <el-col>
          <edit-form ref="edit" @onSubmit="loadAllPapers"></edit-form>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row :gutter="20" type="flex" justify="end">
        <el-col :xs="8" :sm="6" :md="4" :lg="3">
          <div>
            <el-dropdown @command="handleSort">
              <el-button type="primary">
                {{ this.sortMethod.name }}<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="(option,i) in this.sortOption"
                                  :key="i"
                                  :index="option.name"
                                  :command="option">{{ option.name }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-col>
        <el-col :xs="8" :sm="6" :md="4" :lg="3">
          <div style="margin-left: 20px">
            <el-button type="primary" @click="changeOrder">{{ this.sortOrder.name }}</el-button>
          </div>
        </el-col>
      </el-row>
    </el-header>
    <el-main>
      <el-tooltip effect="dark" placeholder="right"
                  v-for="item in papers"
                  :key="item.paperId">
        <p slot="content" style="font-size: 14px;margin-bottom: 6px;">{{ item.title }}</p>
        <p slot="content" style="font-size: 13px;margin-bottom: 6px">
          <span>作者：{{ item.author }}</span>
          <span>发布时间：{{ item.releaseDate }}</span>
        </p>
        <p slot="content" style="font-size: 13px;margin-bottom: 6px">
          <span>上传者:{{ item.uploaderName }}</span>
          <span>上传时间:{{ item.uploadDate }}</span>
        </p>
        <p slot="content" style="font-size: 13px;margin-bottom: 6px">
          <span>{{ item.conference }}</span>
          <span>{{ typeArray[item.type] }}</span>
        </p>
        <el-card class="paper" shadow="hover">
          <div slot="header" class="paper-title">
            <el-link target="_blank" type="primary" @click="handlePaperLink(item.paperId)">
              <span style="font-size: x-large">{{ item.title }}</span>
            </el-link>
          </div>
          <div class="paper-info">
            <i class="el-icon-user"/> <span class="item">{{ item.author }}</span>
            <i class="el-icon-paperclip"/><span class="item">{{ item.conference }}</span>
            <i class="el-icon-date"/><span class="item">{{ item.releaseDate }}</span>
          </div>
          <div class="paper-abstract">
            摘要：{{ item.paperAbstract | ellipsis }}
          </div>
          <div class="paper-footer">
            上传者：{{ item.uploaderName }},
            上传时间：{{ item.uploadDate }}
            <el-link target="_blank" type="primary"
                     v-if="isEditable(item.id)"
                     style="margin-left: 20px"
                     @click="edit(item)">编辑
            </el-link>
            <el-link target="_blank" type="danger"
                     v-if="isEditable(item.id)"
                     style="margin-left: 20px"
                     @click="deletePaper(item)">删除
            </el-link>
          </div>
        </el-card>
      </el-tooltip>
      <el-row>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="papers.length"
          class="pagination">
        </el-pagination>
      </el-row>
      <el-empty description="还没有论文哦" v-if="papers.length===0"></el-empty>
    </el-main>
  </el-container>
</template>

<script>
import Breadcrumb from "./Breadcrumb";
import EditForm from "./EditForm";

export default {
  name: "Library",
  components: {Breadcrumb, EditForm},
  inject:['reload'],
  data() {
    return {
      //论文相关
      currentPage: 1,
      pageSize: 15,
      papers: [],
      //方向相关
      currentDirection: 0,
      //排序相关
      sortMethod: {name: '上传时间', command: 'upload_date'},
      sortOrder: {name: '降序', order: 'DESC'},
      sortOption: [
        {name: '上传时间', command: 'upload_date'},
        {name: '发布时间', command: 'release_date'},
      ],
    }
  },
  filters: {
    ellipsis(value) {
      if (!value) return '';
      if (value.length > 200)
        return value.slice(0, 200) + '...';
      return value
    }
  },
  methods: {
    /*
     加载所有论文
    */
    loadAllPapers() {
      let url = `/paper/getAll/directionId=${this.currentDirection}/ordered?key=${this.sortMethod.command}`
      +`&method=${this.sortOrder.order}&page=${this.currentPage-1}`
      url += `&title=&author=`

      this.$axios.get(url).then(res => {
        this.papers = res.data.data
      }).catch(failRes => {
        this.papers = []
        console.log(failRes)
      })
    },
    /*
      按照方向加载论文
     */
    loadPapersById(value) {
      this.currentDirection = value
      this.loadAllPapers()
    },
    /*
      处理页号
     */
    handleCurrentChange(page) {
      this.currentPage = page
      this.loadAllPapers()
    },

    //排序相关

    /*
      处理排序方式
     */
    handleSort(command) {
      this.sortMethod = command
      this.loadAllPapers()
    },

    changeOrder() {
      if (this.sortOrder.order === 'ASC') {
        this.sortOrder.order = 'DESC'
        this.sortOrder.name = '降序'
      } else {
        this.sortOrder.order = 'ASC'
        this.sortOrder.name = '升序'
      }
      this.loadAllPapers()
    },

    //编辑相关
    /*
      是否可编辑
     */
    isEditable(id) {
      return (this.$store.state.id === id&&this.$store.state.authority>=2) || this.$store.state.authority===4
    },
    /*
      用户自己编辑自己上传的页面信息
     */
    edit(item) {
      this.$refs.edit.dialogFormVisible = true
      this.$refs.edit.form = {
        paperId: item.paperId,
        title: item.title,
        author: item.author.split(' '),
        conference: item.conference,
        releaseDate: item.releaseDate,
        type: item.type + '',
        directions: [],
        uploadDate: item.uploadDate,
        abstract: item.paperAbstract,
        paperLink: item.paperLink,
      }
    },

    /*
      删除
     */
    deletePaper(item){
      this.$axios.get(`/paper/delete?paperId=${item.paperId}`).then(()=>{
        this.$message.success('删除成功')
        this.loadAllPapers()
      }).catch(failRes=>{console.log(failRes)})
    },

    //查看论文详情
    handlePaperLink(paperId) {
      let name
      if(this.$store.state.authority===4)
        name='AdminDetails'
      else
        name='Details'
      this.$router.push({
        name: name,
        params: {
          paperId:paperId,
        }
      }).then(()=>{
        this.reload()
      })
    }
  },
  //计算属性
  computed:{
    typeArray(){
      return ['理论证明型','综述性','实验型','工具型','数据集型']
    }
  },
  //初始化
  mounted() {
    this.loadAllPapers()
  }
}
</script>

<style scoped>
.paper-title {
  display: flex;
  right: 0;
}

.paper-info {
  display: flex;
  right: 0;
  margin-bottom: 20px;
}

.paper-domain {
  display: flex;
  right: 0;
  margin-bottom: 20px;
}

.paper-abstract {
  display: flex;
  text-align: left;
  left: 0;
  margin-bottom: 20px;
}

.paper-footer {
  display: flex;
  right: 0;
  color: #888888;
  font-size: x-small;
}

.item {
  margin-left: 10px;
  margin-right: 10px;
}

.pagination {
  position: fixed;
  bottom: 5%;
  right: 10%;
}
</style>
